<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信访分析系统 - 生成报告</title>
    <script src="./static/vendor/js/tailwindcss-3.4.17.js"></script>
    <link rel="stylesheet" href="./static/vendor/css/font-awesome-6.4.0.all.min.css">
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8fafc;
        }

        /* 自定义滚动条 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* 侧边栏动画 */
        .sidebar {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .sidebar-collapsed {
            width: 64px !important;
        }
        .sidebar-expanded {
            width: 15% !important;
        }

        /* 文本淡入淡出 */
        .fade-text {
            transition: opacity 0.3s ease-in-out;
        }
        .fade-text.hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* 导航菜单项 */
        .nav-item {
            transition: all 0.3s ease;
            position: relative;
        }
        .nav-item::after {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 0;
            background: var(--primary-gradient);
            border-radius: 0 2px 2px 0;
            transition: height 0.3s ease;
        }
        .nav-item:hover::after,
        .nav-item.active::after {
            height: 70%;
        }
        .nav-item:hover {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.1) 0%, transparent 100%);
        }
        .nav-item.active {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.15) 0%, transparent 100%);
            color: #667eea;
        }

        /* 报告模板卡片 */
        .template-card {
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .template-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left 0.6s;
        }
        .template-card:hover::before {
            left: 100%;
        }
        .template-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }
        .template-card.selected {
            border-color: #667eea;
            background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
        }

        /* 历史报告项 */
        .report-item {
            transition: all 0.3s ease;
        }
        .report-item:hover {
            background: rgba(102, 126, 234, 0.05);
            transform: translateX(5px);
        }

        /* 步骤指示器 */
        .step-indicator {
            transition: all 0.3s ease;
        }
        .step-indicator.active {
            background: var(--primary-gradient);
            color: white;
        }
        .step-indicator.completed {
            background: #10b981;
            color: white;
        }

        /* 提示词生成器 */
        .prompt-generator {
            transition: all 0.3s ease;
        }
        .prompt-generator.show {
            opacity: 1;
            transform: translateY(0);
        }
        .prompt-generator.hide {
            opacity: 0;
            transform: translateY(20px);
            pointer-events: none;
        }

        /* 标签选择 */
        .tag-select {
            transition: all 0.2s ease;
        }
        .tag-select:hover {
            transform: scale(1.05);
        }
        .tag-select.selected {
            background: var(--primary-gradient);
            color: white;
        }
    </style>
</head>
<body class="bg-slate-50">
    <div class="flex h-screen overflow-hidden">
        <!-- 左侧边栏 -->
        <div id="sidebar" class="sidebar sidebar-expanded bg-white shadow-xl border-r border-slate-200 flex flex-col">
            <!-- 应用标题 -->
            <div class="p-6 border-b border-slate-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg">
                            <i class="fas fa-file-contract text-white text-lg"></i>
                        </div>
                        <div class="fade-text">
                            <h1 class="font-bold text-xl bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">信访分析系统</h1>
                            <p class="text-xs text-slate-500">智能分析平台</p>
                        </div>
                    </div>
                    <button id="sidebarToggle" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-bars text-slate-600"></i>
                    </button>
                </div>
            </div>

            <!-- 导航菜单 -->
            <div class="flex-1 overflow-y-auto custom-scrollbar">
                <nav class="p-4">
                    <ul class="space-y-2">
                        <li>
                            <a href="dashboard.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-dashboard text-lg"></i>
                                <span class="fade-text font-medium">仪表盘</span>
                            </a>
                        </li>
                        <li>
                            <a href="analysis-results.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-search text-lg"></i>
                                <span class="fade-text font-medium">分析结果</span>
                            </a>
                        </li>
                        <li>
                            <a href="petition-statistics.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-chart-bar text-lg"></i>
                                <span class="fade-text font-medium">信访件统计</span>
                            </a>
                        </li>
                        <li>
                            <a href="regional-analysis.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-map text-lg"></i>
                                <span class="fade-text font-medium">区域分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="coordinate-analysis.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-map-marker-alt text-lg"></i>
                                <span class="fade-text font-medium">经纬度分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="key-issues.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-exclamation-triangle text-lg"></i>
                                <span class="fade-text font-medium">重点问题分析</span>
                            </a>
                        </li>
                        <li>
                            <a href="report-generation.html" class="nav-item active flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-file-alt text-lg"></i>
                                <span class="fade-text font-medium">生成报告</span>
                            </a>
                        </li>
                        
                        <!-- 管理员功能 -->
                        <li class="pt-4 mt-4 border-t border-slate-200">
                            <p class="fade-text text-xs text-slate-500 font-semibold px-4 mb-2">管理员功能</p>
                        </li>
                        <li>
                            <a href="ai-analysis.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-robot text-lg"></i>
                                <span class="fade-text font-medium">AI分析功能</span>
                            </a>
                        </li>
                        <li>
                            <a href="system-settings.html" class="nav-item flex items-center space-x-3 px-4 py-3 rounded-lg cursor-pointer">
                                <i class="fas fa-cog text-lg"></i>
                                <span class="fade-text font-medium">系统设置</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <!-- 用户信息 -->
            <div class="p-4 border-t border-slate-200">
                <div class="flex items-center space-x-3">
                    <div class="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-400 to-cyan-500 flex items-center justify-center shadow-lg">
                        <i class="fas fa-user text-white text-lg"></i>
                    </div>
                    <div class="fade-text flex-1">
                        <p class="font-semibold text-slate-800">管理员</p>
                        <p class="text-xs text-slate-500">admin@example.com</p>
                    </div>
                    <div class="relative">
                        <button id="userMenuBtn" class="fade-text p-2 rounded-lg hover:bg-slate-100 transition-colors">
                            <i class="fas fa-chevron-down text-slate-600"></i>
                        </button>
                        <!-- 下拉菜单 -->
                        <div id="userMenu" class="hidden absolute right-0 bottom-full mb-2 w-48 bg-white rounded-lg shadow-lg border border-slate-200">
                            <a href="#" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 rounded-t-lg">
                                <i class="fas fa-user-circle mr-2"></i>个人中心
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100">
                                <i class="fas fa-cog mr-2"></i>账户设置
                            </a>
                            <hr class="my-1 border-slate-200">
                            <a href="login.html" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 rounded-b-lg">
                                <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部栏 -->
            <header class="bg-white border-b border-slate-200 px-6 py-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-2xl font-bold text-slate-800">生成报告</h2>
                        <p class="text-sm text-slate-500">创建自定义分析报告和总结</p>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button class="px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                            <i class="fas fa-history mr-2"></i>历史记录
                        </button>
                    </div>
                </div>
            </header>

            <!-- 滚动内容区 -->
            <main class="flex-1 overflow-y-auto custom-scrollbar p-6">
                <!-- 步骤指示器 -->
                <div class="flex items-center justify-center mb-8">
                    <div class="flex items-center space-x-4">
                        <div class="step-indicator active w-10 h-10 rounded-full flex items-center justify-center font-semibold">1</div>
                        <div class="w-20 h-1 bg-slate-300"></div>
                        <div class="step-indicator w-10 h-10 rounded-full bg-slate-300 flex items-center justify-center font-semibold">2</div>
                        <div class="w-20 h-1 bg-slate-300"></div>
                        <div class="step-indicator w-10 h-10 rounded-full bg-slate-300 flex items-center justify-center font-semibold">3</div>
                        <div class="w-20 h-1 bg-slate-300"></div>
                        <div class="step-indicator w-10 h-10 rounded-full bg-slate-300 flex items-center justify-center font-semibold">4</div>
                    </div>
                </div>

                <!-- 步骤1: 选择分析结果 -->
                <div id="step1" class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-lg font-semibold text-slate-800">选择统计分析结果</h3>
                        <span class="text-sm text-slate-500">可多选</span>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
                        <label class="template-card border-2 border-slate-200 rounded-lg p-4 cursor-pointer">
                            <input type="checkbox" class="hidden">
                            <div class="flex items-start space-x-3">
                                <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-chart-line text-blue-600"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-medium text-slate-800">信访趋势分析</h4>
                                    <p class="text-xs text-slate-500 mt-1">2024年1月信访数量趋势</p>
                                </div>
                            </div>
                        </label>

                        <label class="template-card border-2 border-slate-200 rounded-lg p-4 cursor-pointer">
                            <input type="checkbox" class="hidden">
                            <div class="flex items-start space-x-3">
                                <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-map text-green-600"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-medium text-slate-800">区域分布分析</h4>
                                    <p class="text-xs text-slate-500 mt-1">各区域信访数量对比</p>
                                </div>
                            </div>
                        </label>

                        <label class="template-card border-2 border-slate-200 rounded-lg p-4 cursor-pointer">
                            <input type="checkbox" class="hidden">
                            <div class="flex items-start space-x-3">
                                <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-exclamation-triangle text-purple-600"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-medium text-slate-800">重点问题分析</h4>
                                    <p class="text-xs text-slate-500 mt-1">重复投诉和热点问题</p>
                                </div>
                            </div>
                        </label>

                        <label class="template-card border-2 border-slate-200 rounded-lg p-4 cursor-pointer">
                            <input type="checkbox" class="hidden">
                            <div class="flex items-start space-x-3">
                                <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-smog text-red-600"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-medium text-slate-800">污染类型统计</h4>
                                    <p class="text-xs text-slate-500 mt-1">各类污染问题占比</p>
                                </div>
                            </div>
                        </label>

                        <label class="template-card border-2 border-slate-200 rounded-lg p-4 cursor-pointer">
                            <input type="checkbox" class="hidden">
                            <div class="flex items-start space-x-3">
                                <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-clock text-yellow-600"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-medium text-slate-800">处理时效分析</h4>
                                    <p class="text-xs text-slate-500 mt-1">平均处理时长统计</p>
                                </div>
                            </div>
                        </label>

                        <label class="template-card border-2 border-slate-200 rounded-lg p-4 cursor-pointer">
                            <input type="checkbox" class="hidden">
                            <div class="flex items-start space-x-3">
                                <div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-percentage text-indigo-600"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-medium text-slate-800">满意度分析</h4>
                                    <p class="text-xs text-slate-500 mt-1">信访处理满意度评价</p>
                                </div>
                            </div>
                        </label>
                    </div>

                    <div class="flex justify-end">
                        <button onclick="nextStep()" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                            下一步 <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>

                <!-- 步骤2: 选择数据范围和分析事项 -->
                <div id="step2" class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6 hidden">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-lg font-semibold text-slate-800">配置报告参数</h3>
                        <button onclick="prevStep()" class="text-slate-500 hover:text-slate-700">
                            <i class="fas fa-arrow-left mr-2"></i>上一步
                        </button>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- 数据范围 -->
                        <div>
                            <h4 class="font-medium text-slate-800 mb-4">数据范围</h4>
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">时间范围</label>
                                    <div class="flex space-x-2">
                                        <input type="date" class="flex-1 px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                        <input type="date" class="flex-1 px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">区域范围</label>
                                    <select multiple class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" size="4">
                                        <option selected>福田区</option>
                                        <option selected>罗湖区</option>
                                        <option>南山区</option>
                                        <option>宝安区</option>
                                        <option>龙岗区</option>
                                        <option>盐田区</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- 分析事项 -->
                        <div>
                            <h4 class="font-medium text-slate-800 mb-4">分析事项</h4>
                            <div class="space-y-3">
                                <label class="flex items-center space-x-3 cursor-pointer">
                                    <input type="checkbox" checked class="w-4 h-4 text-indigo-600 rounded">
                                    <span class="text-sm text-slate-700">总体趋势分析</span>
                                </label>
                                <label class="flex items-center space-x-3 cursor-pointer">
                                    <input type="checkbox" checked class="w-4 h-4 text-indigo-600 rounded">
                                    <span class="text-sm text-slate-700">区域对比分析</span>
                                </label>
                                <label class="flex items-center space-x-3 cursor-pointer">
                                    <input type="checkbox" class="w-4 h-4 text-indigo-600 rounded">
                                    <span class="text-sm text-slate-700">问题类型分析</span>
                                </label>
                                <label class="flex items-center space-x-3 cursor-pointer">
                                    <input type="checkbox" class="w-4 h-4 text-indigo-600 rounded">
                                    <span class="text-sm text-slate-700">处理效率分析</span>
                                </label>
                                <label class="flex items-center space-x-3 cursor-pointer">
                                    <input type="checkbox" class="w-4 h-4 text-indigo-600 rounded">
                                    <span class="text-sm text-slate-700">满意度分析</span>
                                </label>
                                <label class="flex items-center space-x-3 cursor-pointer">
                                    <input type="checkbox" class="w-4 h-4 text-indigo-600 rounded">
                                    <span class="text-sm text-slate-700">改进建议</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-end mt-6">
                        <button onclick="nextStep()" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                            下一步 <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>

                <!-- 步骤3: 选择报告类型 -->
                <div id="step3" class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6 hidden">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-lg font-semibold text-slate-800">选择报告类型</h3>
                        <button onclick="prevStep()" class="text-slate-500 hover:text-slate-700">
                            <i class="fas fa-arrow-left mr-2"></i>上一步
                        </button>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <label class="template-card border-2 border-slate-200 rounded-lg p-6 cursor-pointer text-center">
                            <input type="radio" name="reportType" class="hidden">
                            <i class="fas fa-file-pdf text-4xl text-red-600 mb-3"></i>
                            <h4 class="font-medium text-slate-800 mb-2">PDF报告</h4>
                            <p class="text-sm text-slate-500">正式文档格式，适合打印和分发</p>
                        </label>

                        <label class="template-card border-2 border-slate-200 rounded-lg p-6 cursor-pointer text-center">
                            <input type="radio" name="reportType" class="hidden">
                            <i class="fas fa-file-word text-4xl text-blue-600 mb-3"></i>
                            <h4 class="font-medium text-slate-800 mb-2">Word报告</h4>
                            <p class="text-sm text-slate-500">可编辑格式，便于修改和完善</p>
                        </label>

                        <label class="template-card border-2 border-slate-200 rounded-lg p-6 cursor-pointer text-center">
                            <input type="radio" name="reportType" class="hidden">
                            <i class="fas fa-file-excel text-4xl text-green-600 mb-3"></i>
                            <h4 class="font-medium text-slate-800 mb-2">Excel报表</h4>
                            <p class="text-sm text-slate-500">数据表格格式，便于数据分析</p>
                        </label>
                    </div>

                    <div class="flex justify-end mt-6">
                        <button onclick="nextStep()" class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                            下一步 <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>

                <!-- 步骤4: 生成提示词和预览 -->
                <div id="step4" class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-6 hidden">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-lg font-semibold text-slate-800">生成报告</h3>
                        <button onclick="prevStep()" class="text-slate-500 hover:text-slate-700">
                            <i class="fas fa-arrow-left mr-2"></i>上一步
                        </button>
                    </div>

                    <!-- 提示词生成 -->
                    <div class="mb-6">
                        <div class="flex items-center justify-between mb-4">
                            <h4 class="font-medium text-slate-800">AI提示词</h4>
                            <button onclick="generatePrompt()" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                                <i class="fas fa-magic mr-2"></i>生成提示词
                            </button>
                        </div>
                        <div class="bg-slate-50 rounded-lg p-4">
                            <textarea id="promptText" class="w-full h-32 p-3 bg-white border border-slate-300 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="点击生成提示词按钮，AI将自动生成报告生成提示词..."></textarea>
                        </div>
                    </div>

                    <!-- 报告预览 -->
                    <div class="mb-6">
                        <div class="flex items-center justify-between mb-4">
                            <h4 class="font-medium text-slate-800">报告预览</h4>
                            <div class="flex space-x-2">
                                <button onclick="generateReport()" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                                    <i class="fas fa-cog mr-2"></i>生成报告
                                </button>
                                <button class="px-4 py-2 border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors">
                                    <i class="fas fa-download mr-2"></i>下载模板
                                </button>
                            </div>
                        </div>
                        <div class="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center">
                            <i class="fas fa-file-alt text-6xl text-slate-300 mb-4"></i>
                            <p class="text-slate-500">点击"生成报告"按钮开始生成报告</p>
                        </div>
                    </div>
                </div>

                <!-- 历史报告记录 -->
                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                    <h3 class="text-lg font-semibold text-slate-800 mb-6">历史报告记录</h3>

                    <div class="space-y-3">
                        <div class="report-item flex items-center justify-between p-4 border border-slate-200 rounded-lg">
                            <div class="flex items-center space-x-4">
                                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-file-pdf text-blue-600"></i>
                                </div>
                                <div>
                                    <h5 class="font-medium text-slate-800">2024年1月信访分析报告</h5>
                                    <p class="text-sm text-slate-500">生成时间: 2024-01-15 10:30 | 大小: 2.5MB</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-3">
                                <button class="text-indigo-600 hover:text-indigo-800">
                                    <i class="fas fa-eye mr-1"></i>预览
                                </button>
                                <button class="text-green-600 hover:text-green-800">
                                    <i class="fas fa-download mr-1"></i>下载
                                </button>
                                <button class="text-slate-400 hover:text-slate-600">
                                    <i class="fas fa-share mr-1"></i>分享
                                </button>
                            </div>
                        </div>

                        <div class="report-item flex items-center justify-between p-4 border border-slate-200 rounded-lg">
                            <div class="flex items-center space-x-4">
                                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-file-excel text-green-600"></i>
                                </div>
                                <div>
                                    <h5 class="font-medium text-slate-800">2023年年度信访数据统计表</h5>
                                    <p class="text-sm text-slate-500">生成时间: 2024-01-01 09:00 | 大小: 5.8MB</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-3">
                                <button class="text-indigo-600 hover:text-indigo-800">
                                    <i class="fas fa-eye mr-1"></i>预览
                                </button>
                                <button class="text-green-600 hover:text-green-800">
                                    <i class="fas fa-download mr-1"></i>下载
                                </button>
                                <button class="text-slate-400 hover:text-slate-600">
                                    <i class="fas fa-share mr-1"></i>分享
                                </button>
                            </div>
                        </div>

                        <div class="report-item flex items-center justify-between p-4 border border-slate-200 rounded-lg">
                            <div class="flex items-center space-x-4">
                                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-file-word text-purple-600"></i>
                                </div>
                                <div>
                                    <h5 class="font-medium text-slate-800">重点问题分析专项报告</h5>
                                    <p class="text-sm text-slate-500">生成时间: 2023-12-20 14:45 | 大小: 3.2MB</p>
                                </div>
                            </div>
                            <div class="flex items-center space-x-3">
                                <button class="text-indigo-600 hover:text-indigo-800">
                                    <i class="fas fa-eye mr-1"></i>预览
                                </button>
                                <button class="text-green-600 hover:text-green-800">
                                    <i class="fas fa-download mr-1"></i>下载
                                </button>
                                <button class="text-slate-400 hover:text-slate-600">
                                    <i class="fas fa-share mr-1"></i>分享
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        // 侧边栏折叠功能
        const sidebar = document.getElementById('sidebar');
        const sidebarToggle = document.getElementById('sidebarToggle');
        const fadeTexts = document.querySelectorAll('.fade-text');

        sidebarToggle.addEventListener('click', () => {
            const isCollapsed = sidebar.classList.contains('sidebar-collapsed');

            sidebar.classList.toggle('sidebar-collapsed');
            sidebar.classList.toggle('sidebar-expanded');

            setTimeout(() => {
                fadeTexts.forEach(text => {
                    if (sidebar.classList.contains('sidebar-collapsed')) {
                        text.classList.add('hidden');
                    } else {
                        text.classList.remove('hidden');
                    }
                });
            }, isCollapsed ? 0 : 200);
        });

        // 用户菜单
        const userMenuBtn = document.getElementById('userMenuBtn');
        const userMenu = document.getElementById('userMenu');

        userMenuBtn.addEventListener('click', () => {
            userMenu.classList.toggle('hidden');
        });

        // 点击外部关闭菜单
        document.addEventListener('click', (e) => {
            if (!userMenuBtn.contains(e.target) && !userMenu.contains(e.target)) {
                userMenu.classList.add('hidden');
            }
        });

        // 模板卡片选择
        document.querySelectorAll('.template-card').forEach(card => {
            card.addEventListener('click', () => {
                const checkbox = card.querySelector('input[type="checkbox"], input[type="radio"]');
                if (checkbox.type === 'checkbox') {
                    checkbox.checked = !checkbox.checked;
                    card.classList.toggle('selected', checkbox.checked);
                } else {
                    document.querySelectorAll('input[name="reportType"]').forEach(radio => {
                        radio.closest('.template-card').classList.remove('selected');
                    });
                    checkbox.checked = true;
                    card.classList.add('selected');
                }
            });
        });

        // 步骤控制
        let currentStep = 1;

        function nextStep() {
            if (currentStep < 4) {
                document.getElementById(`step${currentStep}`).classList.add('hidden');
                currentStep++;
                document.getElementById(`step${currentStep}`).classList.remove('hidden');
                updateStepIndicators();
            }
        }

        function prevStep() {
            if (currentStep > 1) {
                document.getElementById(`step${currentStep}`).classList.add('hidden');
                currentStep--;
                document.getElementById(`step${currentStep}`).classList.remove('hidden');
                updateStepIndicators();
            }
        }

        function updateStepIndicators() {
            const indicators = document.querySelectorAll('.step-indicator');
            indicators.forEach((indicator, index) => {
                if (index < currentStep) {
                    indicator.classList.add('completed');
                    indicator.classList.remove('active');
                } else if (index === currentStep - 1) {
                    indicator.classList.add('active');
                    indicator.classList.remove('completed');
                } else {
                    indicator.classList.remove('active', 'completed');
                }
            });
        }

        // 生成提示词
        function generatePrompt() {
            const promptText = document.getElementById('promptText');
            promptText.value = `请根据以下统计分析结果，生成一份综合性的信访分析报告：

数据范围：2024年1月1日 - 2024年1月31日
区域范围：福田区、罗湖区
分析内容：
1. 信访趋势分析 - 展示月度信访数量变化趋势
2. 区域分布分析 - 对比各区域信访数量差异
3. 重点问题分析 - 识别重复投诉和热点问题

报告要求：
- 包含数据图表和分析结论
- 提出针对性的改进建议
- 格式规范，语言专业
- 重点突出，条理清晰`;
        }

        // 生成报告
        function generateReport() {
            alert('报告生成中，请稍候...');
            // 这里可以添加实际的报告生成逻辑
        }
    </script>
</body>
</html>